<template>
  <div class="ifAndFor">
    <button @click.stop="color">切换单双行颜色</button>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell" :class="index%2==0?oneClass:twoClass" v-for="(item,index) in listArray">
        index:{{item.index}},text:{{item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "if-and-for",
    data() {
      return {
        oneClass: "blue",
        twoClass: "green",
        listArray: [
          {"index": 0, "text": "1"},
          {"index": 1, "text": "2"},
          {"index": 2, "text": "3"},
          {"index": 3, "text": "4"},
          {"index": 4, "text": "5"},
          {"index": 5, "text": "6"},
          {"index": 6, "text": "7"},
          {"index": 7, "text": "8"},
          {"index": 8, "text": "9"},
          {"index": 9, "text": "10"},
        ]
      }
    },
    methods: {
      color() {
        if (this.oneClass == "green") {
          this.oneClass = "blue";
          this.twoClass = "green";
        } else {
          this.oneClass = "green";
          this.twoClass = "blue";
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .ifAndFor {
    .mui-table-view {
      margin-bottom: 10px;
      color: white;

      .blue {
        background: #0A98D5;
      }
      .green {
        background: #2ac845;
      }
    }
  }
</style>
